<template>
    <view class="btn-sound flex grid-gap-4 flex-center pt-safe-area">
        <view class="sound-view" @tap="toggleSound">
            <uni-icons type="sound-filled" class="sound" color="var(--rule-color)" />
            <uni-icons type="closeempty" class="sound-close" color="var(--rule-color)" v-if="GLOBALSTATUS?.sound" />
        </view>
    </view>
</template>
<script lang="ts" setup>
import { useStatusStore, useRefs } from '@/stores';
const emits=defineEmits(['change'])
const StatusStore = useStatusStore();
const { GLOBALSTATUS } = useRefs(StatusStore);
const toggleSound = () => {
    emits('change',!GLOBALSTATUS.value?.sound)
    StatusStore.set('sound', !GLOBALSTATUS.value?.sound);
}
</script>
<style lang="scss" scoped>
.btn-sound {
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 9999;

    .sound-view {
        position: relative;
    }

    .sound {
        background: linear-gradient(180deg, var(--item-bg-1), var(--item-bg-2));
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sound-close {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        --rule-color: transparent;
        background-image: linear-gradient(180deg, var(--item-bg-1), var(--item-bg-2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}</style>